<html>
    <head>
        <title>监听器</title>
    </head>
    <body>
        <script>
            // ★、 监听器
                /*
                    虽然计算属性在大多数情况下更合适，但有时也需要一个"自定义的监听器"。
                    这就是为什么Vue通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
                    当需要在数据变化时执行"异步" 或者 "开销较大的操作" 时，这个方式是最有用的。
                */
                    /*
                        <div id="watch-example">
                            <p>
                                Ask a yes/no question:
                                <input v-model="question">
                            </p>
                            <p>{{ answer }}</p>
                        </div>
                        
                    */
                    /*
                         因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。
                    */
                    // <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"/>
                    // <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js" />
                                var watchExampleVM = new Vue({
                                                                el: '#watch-example',
                                                                data: {
                                                                    question: '',
                                                                    answer: 'I cannot give you an answer until you ask a question!'
                                                                },
                                                                watch: {
                                                                    // 如果 `question` 发生改变，这个函数就会运行
                                                                    question: function (newQuestion, oldQuestion) {
                                                                    this.answer = 'Waiting for you to stop typing...'
                                                                    this.debouncedGetAnswer()
                                                                    }
                                                                },
                                                                created: function () {
                                                                    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                                                                    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
                                                                    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                                                                    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                                                                    // 请参考：https://lodash.com/docs#debounce
                                                                    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
                                                                },
                                                                methods: {
                                                                    getAnswer: function () {
                                                                    if (this.question.indexOf('?') === -1) {
                                                                        this.answer = 'Questions usually contain a question mark. ;-)'
                                                                        return
                                                                    }
                                                                    this.answer = 'Thinking...'
                                                                    var vm = this
                                                                    axios.get('https://yesno.wtf/api')
                                                                        .then(function (response) {
                                                                        vm.answer = _.capitalize(response.data.answer)
                                                                        })
                                                                        .catch(function (error) {
                                                                        vm.answer = 'Error! Could not reach the API. ' + error
                                                                        })
                                                                    }
                                                                }
                                                            })
                                /*
                                    在这个示例中，使用watch选项允许我们指定一个异步操作(访问一个api) ,限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。
                                    这些都是计算属性无法完成的。
                                */
        </script>
    </body>
</html>